<!--表格组件-分页组件-->
<template>
  <el-form inline :size="$attrs.size" class="search-form">
    <el-form-item
      v-for="item in searchFormList"
      :key="item.prop"
      :prop="item.prop"
      :label="item.label"
    >
      <component
        :is="item.tag"
        v-model="data.searchFormValue[item.prop]"
        v-bind="item.attrs"
        style="width: 220px"
      >
        <template v-if="item.children?.tag">
          <component
            :is="item.children.tag"
            v-for="(val, index) in item.children.options"
            :key="index"
            :label="val.label"
            :value="val.value"
          />
        </template>
      </component>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="emit('onSearch', data.searchFormValue)">
        {{ $t('基础文本.搜索') }}
      </el-button>
      <el-button @click="data.searchFormValue = {}">{{ $t('基础文本.重置') }}</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
const { searchFormList } = defineProps({
  //搜索条件列表
  searchFormList: {
    type: Array,
    default: () => [],
  },
});

const data = reactive({
  searchFormValue: {}, //搜索表单
});

const emit = defineEmits(['onSearch']);
</script>

<style scoped lang="less">
.el-form--inline .el-form-item {
  margin: 0 20px 14px 0;
}
</style>
